<template>
    <div class="home">
        <!-- 搜索 -->
        <van-sticky>
            <van-search
                v-model="searchVal"
                disable
                placeholder="请输入搜索关键词"
                @click="handleSearchClick"
            />
        </van-sticky>
        <!-- 来个下拉刷新 -->
        <van-pull-refresh
            v-model="isLoading"
            success-text="刷新成功"
            :head-height="60"
            @refresh="onRefresh"
        >
            <!-- 被下拉的组件 -->
            <!-- 轮播 -->
            <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="purple"
            >
                <van-swipe-item v-for="item in banner" :key="item.id">
                    <img
                        :src="item.image_url"
                        alt=""
                        width="100%"
                        :style="{ display: 'block' }"
                    />
                </van-swipe-item>
            </van-swipe>
            <!-- 快捷导航 -->
            <van-grid :column-num="5">
                <van-grid-item
                    v-for="(item, index) in channel"
                    :key="index"
                    :icon="item.icon_url"
                    :text="item.name"
                    @click="
                        $router.push({
                            name: 'channel',
                            params: { id: item.id },
                        })
                    "
                />
            </van-grid>
            <!-- 品牌制造商 -->
            <div class="brand">
                <div class="home_title">品牌制造商提供</div>
                <ul>
                    <li
                        v-for="(item, index) in brandList"
                        :key="index"
                        @click="
                            $router.push({
                                name: 'branddetail',
                                params: { id: item.id },
                            })
                        "
                    >
                        <img :src="item.pic_url" alt="" />
                        <h4>{{ item.name }}</h4>
                        <p>￥{{ item.floor_price }}元</p>
                    </li>
                </ul>
            </div>
            <!-- 新品首发 -->
            <div class="new">
                <div class="home_title">周一周四·新品首发</div>
                <ul>
                    <li
                        v-for="item in newGoodsList"
                        :key="item.id"
                        @click="
                            $router.push({
                                name: 'Pruductdetail',
                                params: { id: item.id },
                            })
                        "
                    >
                        <img :src="item.list_pic_url" alt="" />
                        <div>{{ item.name }}</div>
                        <p>￥{{ item.retail_price }}元</p>
                    </li>
                </ul>
            </div>
            <!-- 人气推荐 -->
            <div class="hot">
                <div class="home_title">人气推荐</div>
                <van-card
                    v-for="item in hotGoodsList"
                    :key="item.id"
                    :price="item.retail_price"
                    :desc="item.goods_brief"
                    :title="item.name"
                    :thumb="item.list_pic_url"
                />
            </div>
            <!-- 专题精选 -->
            <div class="topic">
                <div class="home_title">专题精选</div>
                <van-swipe :loop="false" :show-indicators="false" :width="300">
                    <van-swipe-item v-for="item in topicList" :key="item.id">
                        <img :src="item.item_pic_url" alt="" />
                        <div class="topic_div">
                            {{ item.title }}￥{{ item.price_info }}元
                        </div>
                        <p>{{ item.subtitle }}</p>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 列表 -->
            <div class="new" v-for="item in categoryList" :key="item.id">
                <div class="home_title">{{ item.name }}</div>
                <ul>
                    <li
                        v-for="list in item.goodsList"
                        @click="
                            $router.push({
                                name: 'Pruductdetail',
                                params: { id: list.id },
                            })
                        "
                        :key="list.id"
                    >
                        <img :src="list.list_pic_url" alt="" />
                        <div>{{ list.name }}</div>
                        <p>￥{{ list.retail_price }}元</p>
                    </li>
                </ul>
            </div>
        </van-pull-refresh>

        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>

        <transition name="van-fade">
            <div class="popup-shadow" v-show="$store.state.isShowShadow"></div>
        </transition>
        <Totop :iftop="iftop" @handleScroll="handleScroll" />
    </div>
</template>

<script>
import { GetHomeLists } from "@/request/api";
import Totop from "../components/backTop";
export default {
    name: "Home",
    data() {
        return {
            isLoading: false, //是否处于下拉刷新状态
            searchVal: "", // 添加这个value否则报错
            banner: [], //轮播图
            channel: [], //推荐
            brandList: [], // 品牌制造商
            newGoodsList: [], //新品首发
            hotGoodsList: [], //人气推荐
            topicList: [], //专题精选
            categoryList: [], //分类的数据商品
            iftop: false, //返回顶部控制值
        };
    },
    methods: {
        onRefresh() {
            //下拉刷新
            setTimeout(() => {
                this.$toast.success("刷新成功"); //不能Toast，会找不到
                this.isLoading = false;
            }, 500);
        },
        //一键返回顶部的函数，点击触发
        handleScroll(iftop) {
            this.iftop = iftop;
        },
        handleSearchClick() {
            // 把是否展示阴影 的变量该成true。在home组件中改的。
            this.$router.push("/home/searchPopup");
            this.$store.commit("chanIsShowShadow", true);
        },
    },
    components: {
        Totop,
    },
    created() {
        //首页数据请求
        GetHomeLists().then((res) => {
            if (res.data.errno == 0) {
                // console.log(res.data);
                let {
                    banner,
                    channel,
                    brandList,
                    newGoodsList,
                    hotGoodsList,
                    topicList,
                    categoryList,
                } = res.data.data;
                this.banner = banner;
                this.channel = channel;
                this.brandList = brandList;
                this.newGoodsList = newGoodsList;
                this.hotGoodsList = hotGoodsList;
                this.topicList = topicList;
                this.categoryList = categoryList;
            }
        });
    },
};
</script>
<style lang="less" scoped>
.popup-shadow {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
}
.home {
    padding-bottom: 50px;
}
.doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
}
// 品牌制造商
.brand {
    background: #fff;
    margin-top: 20px;

    .home_title {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        li {
            width: 49%;
            position: relative;
            img {
                width: 100%;
            }
            h4 {
                position: absolute;
                left: 10px;
                top: 10px;
            }
            p {
                position: absolute;
                left: 10px;
                top: 40px;
                color: darkred;
            }
        }
    }
}
//新品首发
.new {
    background: #fff;
    margin-top: 20px;
    .home_title {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    ul {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        flex-wrap: wrap;
        li {
            width: 49%;
            text-align: center;
            img {
                width: 100%;
            }
            div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-bottom: 15px;
            }
            p {
                color: darkred;
            }
        }
    }
}
//人气推荐
.hot {
    background: #fff;
    margin-top: 20px;
    .home_title {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .van-card__bottom .van-card__price {
        color: darkred;
    }
}
//专题精选
.topic {
    background: #fff;
    margin-top: 20px;
    .home_title {
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    img {
        width: 100%;
        height: 200px;
    }
    .topic_div {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        text-align: center;
    }
    p {
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #666;
        padding: 10px;
    }
}

.clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
